<template>
  <div class="container-box">
    <h2>楼栋管理</h2>
    &nbsp;
    <span>用于展示小区里每一栋的基础信息</span>
    <!--表单区域-->
    <div class="table-box">
      <!--操作区域-->
      <el-row type="flex" justify="space-between" class="tool-bar">
        <div>
          <el-form
            ref="form"
            label-position="top"
            label-width="80px"
            :inline="true"
            size="small"
          >
            <el-form-item label="小区名称">
              <el-select
                v-model="queryData.community_code"
                placeholder="请输入"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                /></el-select></el-form-item>
            <el-form-item label="栋数名称">
              <el-input v-model="queryData.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="时间">
              <div class="block">
                <el-date-picker
                  v-model="timeVlaue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </div>
            </el-form-item>
            <el-form-item class="weizhi">
              <el-button @click="onSearchReset">重置</el-button>
              <el-button type="primary" @click="onSearchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
      <div class="dada">
        <el-card
          class="bottom"
          shadow="always"
          :body-style="{ padding: '20px' }"
        >
          <el-row type="flex" justify="space-between" align="middle">
            <div class="left" />
            <div class="right">
              <el-button
                type="primary"
                plain
                size="small"
                @click="dialogShow = true"
              >新增</el-button>
            </div>
          </el-row>
          <el-table :data="list" stripe>
            <!-- prop表示这一列展示哪个数据 -->
            <el-table-column
              prop="community_code"
              label="栋数编号"
              width="350%"
            />
            <el-table-column prop="community.name" label="小区名称" />
            <el-table-column prop="name" label="栋数名称" />
            <el-table-column prop="lift" label="电梯数" />
            <el-table-column prop="create_time" label="创建时间" />

            <!-- 表格列个性化渲染 -->
            <!-- <el-table-column prop="icon" label="图标class">
          <template slot-scope="scope">
            <b>{{ scope.row.icon }}</b>
            <i :class="`fa ${scope.row.icon}`" />
          </template>
        </el-table-column> -->

            <!-- <el-table-column prop="sort_num" label="权重" /> -->
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button
                  size="small"
                  type="text"
                  @click="editRow(row.id)"
                >编辑</el-button>&nbsp;
                <el-popconfirm title="确定删除吗？" @confirm="delRow(row.id)">
                  <el-button
                    slot="reference"
                    size="small"
                    type="text"
                  >删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
    <!--分页区域-->
    <div class="page">
      <el-pagination
        :current-page.sync="queryData.current"
        :page-sizes="[4, 8, 10, 20]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>

    <div class="div_fot">Ant Design Pro黑马前端合肥前端欢迎您</div>
    <div class="div_foot">&copy;2023 悦兴物业集团</div>
    <!-- 弹框区域 -->
    <el-drawer
      :title="title"
      :visible.sync="dialogShow"
      size="800px"
      @close="btnCancel"
    >
      <div class="tankuang">
        <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="150px"
          label-position="top"
        >
          <el-row>
            <el-col :span="11">
              <el-form-item label="所属小区" prop="community_code">
                <el-select
                  v-model="formData.community_code"
                  size="medium"
                  class="inputW"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  /></el-select> </el-form-item></el-col>

            <el-col :span="11">
              <el-form-item label="栋数名称" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入"
                  size="medium"
                  class="inputW"
                /> </el-form-item></el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="电梯数" prop="lift">
                <el-input
                  v-model="formData.lift"
                  size="medium"
                  class="inputW"
                  placeholder="请输入"
                /> </el-form-item></el-col>

            <el-col :span="11">
              <el-form-item label="总户数" prop="house">
                <el-input
                  v-model="formData.house"
                  placeholder="请输入"
                  size="medium"
                  class="inputW"
                /> </el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="描述" prop="desc">
                <el-input
                  v-model="formData.desc"
                  size="medium"
                  class="inputda"
                  placeholder="请输入"
                  type="textarea"
                  :rows="12"
                /> </el-form-item></el-col>

            <el-col :span="11" />
          </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="enniu">
          <el-button size="medium" @click="dialogShow = false">取消</el-button>
          <el-button
            size="medium"
            type="primary"
            @click="btnOk"
          >确定</el-button>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getBuildingListApi,
  getsApi,
  getNameApi,
  addBuildingApi,
  editoleApi,
  delRoleApi
} from '@/api/building'
// import { getTagList, addTag, editTag, getTagInfo, delTag } from '@/api/tag'
export default {
  name: 'Tag',
  data() {
    return {
      timeVlaue: '',
      list: [],
      options: [],
      queryData: {
        current: 1,
        pageSize: 10,
        community_code: '',
        create_time: '',
        end_time: ''
      },

      formData: {
        code: '',
        community: '',
        community_code: '',
        name: '',
        create_time: '',
        lift: '',
        house: '',
        desc: ''
      },
      formRules: {
        desc: [{ required: true, message: '不能为空', trigger: 'blur' }],
        house: [{ required: true, message: '不能为空', trigger: 'blur' }],
        lift: [{ required: true, message: '不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        community_code: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      // 总数
      total: 0,
      // 控制弹框的显示
      dialogShow: false
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改楼栋' : '添加楼栋'
    }
  },
  watch: {
    timeVlaue() {
      console.log(this.timeVlaue)
      this.queryData.create_time = +new Date(this.timeVlaue[0])
      this.queryData.end_time = +new Date(this.timeVlaue[1])
      const timearray = [this.queryData.create_time, this.queryData.end_time]
      this.queryData.create_time = timearray.join(',')
      console.log(this.queryData.create_time)
    }
  },
  created() {
    this.initData()
    this.getNameApia()
  },
  methods: {
    // 获取数据
    async initData() {
      const res = await getBuildingListApi(this.queryData)
      console.log(res)
      this.list = res.data.rows
      this.list = this.list.map((item) => {
        item.create_time = this.$moment(item.create_time).format(
          'YYYY-MM-DD h:mm:ss'
        )
        return item
      })
      //  .forEach(item => {
      // // JSON.stringify(item.community)
      //   item.community = item.community.name
      // })
      console.log(this.list)
      this.total = res.data.count
    },
    async getNameApia() {
      const res = await getNameApi()
      console.log(res)
      this.options = res.data
      console.log(this.options)
    },
    // 筛选表单搜索条件
    onSearchSubmit() {
      this.queryData.current = 1
      this.initData()
    },
    // 筛选表单重置
    onSearchReset() {
      this.queryData = {
        current: 1,
        pageSize: 10,
        community_code: '',
        create_time: '',
        end_time: ''
      }
      this.timeVlaue = ''
      this.initData()
    },
    // 每页数量切换事件
    sizeChange(val) {
      console.log(val)
      this.queryData.pageSize = val
      this.initData()
    },
    // 页码切换事件
    currentChange(val) {
      console.log(val)
      this.queryData.current = val
      this.initData()
    },
    // 新增/修改标签
    async btnOk() {
      await this.$refs.form.validate()
      this.formData.house = this.formData.house * 1
      this.formData.lift = this.formData.lift * 1
      this.formData.id
        ? await editoleApi(this.formData)
        : await addBuildingApi(this.formData)

      // await this.$refs.form.validate()

      this.$message.success(this.formData.id ? '修改楼栋成功' : '添加楼栋成功')
      this.dialogShow = false
      this.initData()
    },
    // 清空表单和校验
    btnCancel() {
      this.formData = {
        catename: '',
        icon: '',
        sort_num: 10
      }
      this.$refs.form.clearValidate()
    },
    // 修改标签
    async editRow(id) {
      // this.formData.id = id
      const res = await getsApi(id)
      console.log(res)

      this.formData = res.data
      console.log(this.formData)

      this.dialogShow = true
    },
    // 删除标签
    async delRow(id) {
      console.log('1')
      await delRoleApi(id)
      this.$message.success('删除成功')
      if (this.queryData.current > 1 && this.list.length === 1) {
        this.queryData.current--
      }
      this.initData()
    }
  }
}
</script>
<style>
body {
  background-color: rgb(247, 248, 250);
  padding: 30px;
}
h2 {
  display: inline-block;
}
.container-box {
  padding: 30px;
}
.filter-form,
.tool-bar {
  background-color: rgb(255, 255, 255);
  padding: 15px;
  margin-bottom: 10px;
}
.tool-bar .weizhi {
  position: absolute;
  margin-top: 39px;
  margin-left:250px;
}

.dada .dadw {
  height: 22px;
}
.div_fot {
  font-size: 15px;
  color: rgb(86, 87, 87);

  margin-top:60px;

  text-align: center;

  width: 100%;
}
.div_foot {
  margin-top: 20px;

  font-size: 15px;

  text-align: center;

  width: 100%;
}
.dada .bottom {
  margin-top: 30px;
}
.tankuang .el-input {
  width: 320px;
  margin-left: 32px;
  padding-right: px;
}
.tankuang .inputW {
  height: 32px;
}
.el-form-item__label {
  font-size: 18px;
  font-weight: 400;
  margin-left: 32px;
}
.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  margin-left: 32px;
  padding-right: px;
}
.tankuang .inputda {
  margin-left: 32px;
  padding-right: 32px;
}
.tankuang .enniu {
  margin-top: 107px;
  margin-right: 20px;
}
</style>
